<template>
	<view class="sort-head">
		<view class="hoad-title">
			<view class="title" v-for="item in categoryData" @click="goSortDetails(item.categoryId, item.name)" :key="item.categoryId">
				<image :src="item.imgUrl" mode=""></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { categoryData } from '../../utils/classify'

const goSortDetails = (id, title) => {
	uni.navigateTo({
		url: `/subpkg/sortDetails/sortDetails?id=${id}&title=${title}`
	})
}


// 页面加载
onLoad(message => {
	console.log(categoryData);
	// init()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
</script>

<style lang="scss">
.sort-head {
	padding: 50rpx;
	.hoad-title {
		width: 90rpx;
		display: grid;
		grid-template-columns: repeat(4, 13.3vw);
		grid-gap: 2.3vw 10.4vw;

		text-align: center;
		.title {
			display: flex;
			flex-direction: column;
			width: 90rpx;
			height: 150rpx;
			image {
				width: 100%;
				height: 80rpx;
			}
		}
	}
}
</style>
